<template>
  <div class="root">
    <p class="title">该功能前两个方法是搭配原生JS的api进行封装的方法，后者是通过复制依赖组件封装完成的</p>
    <pre>
    <code>
      export const copy = {
        elCopy: (el) => {
          var Url2 = document.getElementById(el).innerText;
          if (typeof(Url2) != 'number') {
            if (Url2.search("清除换行符") != -1 ) {
              Url2 = Url2.replace("清除换行符","");
            }
          }
          var oInput = document.createElement("input");
          oInput.setAttribute("readonly","readonly");
          oInput.value = Url2;
          oInput.style.opacity = '0';
          oInput.style.position = 'absolute';
          oInput.style.top = '0';
          oInput.style.zIndex = '-1';
          document.body.appendChild(oInput);
          if (browser.ios()) {
            window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(oInput);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');// 执行浏览器复制命令
            // 移除选中的元素
            window.getSelection().removeAllRanges();
            console.log(successful);
          } else if (browser.android()) {
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = "oInput";
            // oInput.style.display = "none";
          }
          // oInput.style.display = "none";
        },
        dataCopy: (data) => {
          if (typeof(data) != 'number') {
            if (data.search("清除换行符") != -1 ) {
              data = data.replace("清除换行符",""); 
            }
          }
          var oInput = document.createElement("input");
          oInput.setAttribute("readonly","readonly");
          oInput.value = data;
          oInput.style.opacity = '0';
          oInput.style.position = 'absolute';
          oInput.style.top = '0';
          oInput.style.width = '50px';
          oInput.style.zIndex = '-1';
          document.body.appendChild(oInput);
          if (browser.android()) {
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = "oInput";
            // oInput.style.display = "none";
          } else {
            window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(oInput);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');// 执行浏览器复制命令
            // 移除选中的元素
            window.getSelection().removeAllRanges();
            alert(successful);
            console.log(successful);
          }
        },
        clipCopy: (el, txtel) => {  // el为点击的按钮类名 txtel为要复制的内容的input的id
          var btn = document.querySelector(el)
          btn.setAttribute('data-clipboard-target',txtel)
          var clipboard = new Clipboard(el);
          clipboard.on('success', function(e) {
            console.info('Text:', e.text);
            e.clearSelection();
            clipboard.destroy();
          });
          clipboard.on('error', function(e) {
            clipboard.destroy();
          });
        }
      }
      </code>
      </pre>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
    };
  },

  created() {},

  mounted() {},

  methods: {
  }
};
</script>

<style lang="less" scoped>
  .title {
    margin: 20px;
    border-left: 3px solid #f00;
    padding-left: 20px;
  }
</style>
